<!--
  Copyright 2015-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- 106px is to compensate for -6px margin-top below -->
<div style="position: relative;"
     ng-style="{'min-height': async || hasUnfilteredAuxThreadProfile ? '106px' : '100px'}">
  <div ng-include src="'template/gt-http-error-overlay.html'"></div>
  <div style="text-align: center; margin-top: -2px; margin-bottom: 6px; color: #555;"
       ng-if="auxiliary || hasUnfilteredAuxThreadProfile">
    <label class="form-check-label form-check-inline"
           ng-class="{'disabled': !hasUnfilteredMainThreadProfile}">
      <input class="form-check-input"
             type="radio"
             name="view"
             value="main"
             ng-click="clickTopRadioButton(false)"
             ng-checked="!auxiliary && !onlyExistsAuxThreadProfile"
             ng-disabled="!hasUnfilteredMainThreadProfile">
      <a class="gt-radio-link"
         href="transaction/thread-profile{{tabQueryString(false)}}"
         ng-click="clickActiveTopLink($event, false)"
         ng-if="hasUnfilteredMainThreadProfile">
        Main thread profile
      </a>
      <span ng-if="!hasUnfilteredMainThreadProfile" class="gt-radio-disabled">Main thread profile</span>
    </label>
    <label class="form-check-label form-check-inline">
      <input class="form-check-input"
             type="radio"
             name="view"
             value="aux" ng-click="clickTopRadioButton(true)"
             ng-checked="auxiliary || (!hasUnfilteredMainThreadProfile && hasUnfilteredAuxThreadProfile)">
      <a class="gt-radio-link"
         href="transaction/thread-profile{{tabQueryString(true)}}"
         ng-click="clickActiveTopLink($event, true)">
        Auxiliary thread profile
      </a>
    </label>
  </div>
  <div gt-spinner
       gt-show="showSpinner && !showProfile"
       class="gt-left-aligned-spinner">
  </div>
  <div style="position: absolute; width: 100%; margin-top: 50px;">
    <div gt-spinner
         gt-show="showSpinner && showProfile">
    </div>
  </div>
  <!-- negative right position is so overlay will cover view flame graph link which sticks slightly beyond container -->
  <div class="gt-panel-overlay"
       ng-if="showSpinner"
       style="right: -20px;">
  </div>
  <div ng-if="!showSpinner && !showProfile && !httpError"
       style="display: table; width: 100%; height: 100%;"
       ng-style="{'padding-top': auxiliary || hasUnfilteredAuxThreadProfile ? '25px' : '30px'}">
    <div style="display: table-cell; text-align: center; vertical-align: middle;">
      <div class="gt-chart-no-data"
           ng-hide="showOverwrittenMessage">
        No data for this time period
      </div>
      <div class="gt-chart-no-data"
           ng-if="showOverwrittenMessage">
        There was thread profile data but it has expired
      </div>
    </div>
  </div>
  <!-- ng-show needed here instead of ng-if because thread-profile.js binds directly to #profileOuter -->
  <div ng-show="showProfile">
    <div class="gt-nowrap d-none" id="profileOuter">
      <div class="clearfix" style="padding: 10px 0;">
        <!-- margin-bottom: 15px is for smaller screens where the link is above the select -->
        <a class="float-right gt-flame-graph-link" ng-href="{{flameGraphHref()}}">
          <em>View flame graph</em>
        </a>

        <div class="float-left" style="font-weight: 700;">
          Total of {{sampleCount | number}} sampled stack traces in selected time period
        </div>
      </div>
      <div ng-form
           gt-form-with-primary-button
           style="margin-bottom: 10px;">
        <input class="gt-profile-text-filter form-control d-inline-block align-middle mr-1"
               ng-model="filter"
               placeholder="filter the profile tree"
               aria-label="Profile tree filter"
               style="max-width: 25em;">
        <button class="gt-profile-text-filter-refresh btn btn-primary align-middle mr-1"
                ng-click="refresh()">
          Refresh
        </button>
        <button class="gt-chart-button align-middle"
                uib-popover-template="'template/help/profile-filter.html'"
                popover-placement="top"
                popover-trigger="'outsideClick'"
                style="font-size: 28px;">
          <span title="Help"
                class="fas fa-question-circle">
          </span>
        </button>
        <div ng-if="parsingError" class="gt-red" style="margin-top: 10px; margin-bottom: -5px;">
          {{parsingError}}
        </div>
      </div>
      <!-- background-color: white is to help the text not overlap the right hand panel border -->
      <span class="gt-profile" style="background-color: white;"></span>
    </div>
  </div>
</div>
